<template>
	<view>
		<musichead class="musichead" name="搜索结果" :isShowback="true" />
		<view class="search-result-everyone">
			<view class="search-result-search">
				<input class="uni-input" v-model="words" @confirm="search" placeholder-style="color: #e9e9e9;"
					placeholder="请输入要搜索的歌曲" />
				<text class="iconfont icon-sousu" @click="search()"></text>
			</view>
			<view class="search-result-body">
				<view v-for="(song, index) in songList" :key="song.id" class="song-item">
					<view class="song-info" @click="playSong(song)">
						<text class="song-name">{{song.name}}</text>
						<text class="song-artist">{{getSongArtists(song)}}</text>
					</view>
					<text class="iconfont icon-bofang play-icon" @click="addToNext(song)"></text>
				</view>
			</view>
		</view>
		<musicbackend class="musicbackend" />
	</view>
</template>

<script>
	import '@/common/iconfont.css'
	import musichead from '../../components/musichead/musichead.vue'
	import musicbackend from '../../components/musicbackend/musicbackend.vue'
	import audioManager from '@/common/audioManager.js'
	import {
		searchMusic,
		getSongUrl
	} from '../../common/api.js'
	
	export default {
		data() {
			return {
				words: '',
				songList: []
			}
		},
		onLoad(options) {
			try {
				if (options.songList) {
					const parsedList = JSON.parse(decodeURIComponent(options.songList));
					if (Array.isArray(parsedList)) {
						this.songList = parsedList;
						console.log('Loaded song list:', this.songList);
					} else {
						throw new Error('Invalid song list format');
					}
				}
			} catch (error) {
				console.error('Failed to load song list:', error);
				uni.showToast({
					title: '加载搜索结果失败',
					icon: 'none'
				});
			}
		},
		methods: {
			async search() {
				try {
					if (!this.words) return;
					
					const songlist = await searchMusic(this.words);
					if (!songlist || !Array.isArray(songlist)) {
						throw new Error('Invalid search results');
					}
					
					this.songList = songlist;
				} catch (error) {
					console.error('Search failed:', error);
					uni.showToast({
						title: '搜索失败，请重试',
						icon: 'none'
					});
				}
			},
			getSongArtists(song) {
				return song.artists.map(artist => artist.name).join('、');
			},
			async addToNext(item) {
				try {
					const songData = await getSongUrl(item.id);
					const newSong = {
						...songData,
						Time: item.duration / 1000,
						imgurl: item.album.artist.img1v1Url,
						name: item.name,
						artist: item.artists.map(artist => artist.name).join('、'),
						id: item.id
					};
					
					const currentSong = audioManager.getCurrentSong();
					if (currentSong.current.id) {
						const currentIndex = currentSong.playlist.findIndex(song => song.id === currentSong.current.id);
						currentSong.playlist.splice(currentIndex + 1, 0, newSong);
					} else {
						audioManager.addToPlaylist(newSong);
					}
					
					uni.showToast({
						title: '已添加到下一首',
						icon: 'none'
					});
				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({
						title: '添加失败',
						icon: 'none'
					});
				}
			},
			async playSong(item) {
				try {
					const songData = await getSongUrl(item.id);
					const newSong = {
						...songData,
						Time: item.duration / 1000,
						imgurl: item.album.artist.img1v1Url,
						name: item.name,
						artist: item.artists.map(artist => artist.name).join('、'),
						id: item.id
					};
					
					audioManager.addToPlaylist(newSong);
					audioManager.switchSong(newSong);
				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({
						title: '播放失败',
						icon: 'none'
					});
				}
			}
		},
		components: {
			musichead,
			musicbackend
		}
	}
</script>

<style lang="scss">
	.musichead {
		color: #fff;
		position: absolute;
		width: 100vw;
	}

	.search-result-everyone {
		width: 100vw;
		height: calc(100vh - 73px);
		background-color: #444444;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow-y: hidden;
	}

	.search-result-search {
		position: absolute;
		top: 80px;
		width: 85vw;
		height: 30px;
		border-radius: 20px;
		background-color: rgba(228, 228, 228, 0.5);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		display: flex;

		input {
			width: 250px;
			height: 100%;
			border-radius: 20px 0 0 20px;
			// background-color: rgba(206, 206, 206, 0.5);
			-webkit-backdrop-filter: blur(8px);
			// backdrop-filter: blur(8px);
			padding-left: 10px;
			font-size: 14px;
			font-family: "宋体", SimSun, sans-serif;
			color: #fff;

		}

		text {
			margin: auto;
			font-size: 26px;
			color: #fff;
		}

	}

	.search-result-body {
		position: absolute;
		top: 130px;
		width: 100vw;
		height: calc(80vh - 10px);
		background-color: #404040;
		overflow-y: auto;

		// display: flex;
		// justify-content: center;
		.search-nav {
			width: 100%;
			height: 25px;
			display: flex;
			justify-content: space-between;
			color: #fff;
		}

		.search-box {
			width: 100vw;
			height: 152px;
			margin: auto;
			// margin-bottom: 20px;
			display: block;

			.search-tab {
				height: 22px;
				border-radius: 10px;
				margin: 5px 0px 0px 10px;
				display: inline-flex;
				align-items: center;
				font-size: 16px;
				justify-content: center;
				background-color: rgba(255, 255, 255, 0.5);
				-webkit-backdrop-filter: blur(8px);
				backdrop-filter: blur(8px);

				view {
					margin: 10px;
					margin-right: 5px;
					font-size: 14px;
					color: #fff;
				}

				text {
					margin: 2px 8px 0px 0px;
					font-size: 12px;

					color: #fff;
				}
			}

		}

		.song-item {
			padding: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);

			.song-info {
				flex: 1;
				display: flex;
				flex-direction: column;

				.song-name {
					color: #fff;
					font-size: 16px;
					margin-bottom: 5px;
				}

				.song-artist {
					color: rgba(255, 255, 255, 0.6);
					font-size: 12px;
				}
			}

			.play-icon {
				color: #fff;
				font-size: 24px;
				padding: 10px;
			}
		}

	}

	.search-result-body::-webkit-scrollbar {
		display: none;
	}

	.musicbackend {
		position: absolute;
		bottom: 50px;
		z-search: 10;
	}
</style>